<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="__INDEX__/css/mui.min.css" rel="stylesheet" />
		<link href="__INDEX__/css/Phoebe.css" rel="stylesheet" />
		<link href="__INDEX__/css/all.css" rel="stylesheet" />
		<title>编辑资料</title>
		<style>
			.compile-msg p {
				background: #fff;
				padding: 0px 3.5%;
				color: #666;
			}
			
			.compile-msg p:first-child {
				padding: 10px 3.5%;
				margin-bottom: 10px;
				line-height: 60px;
			}
			
			.compile-msg p:first-child>input {
				opacity: 0;
				height: 0;
				float: left;
			}
			
			.compile-msg p:first-child>label {
				float: right;
			}
			
			.compile-msg p:first-child>label>img {
				width: 60px;
				height: 60px;
				border-radius: 50%;
			}
			
			.compile-msg p:nth-child(2) {
				line-height: 40px;
				border-bottom: 1px solid #dbdbdb;
			}
			
			.compile-msg p:nth-child(2)>input {
				width: 100px;
				float: right;
				font-size: 12px;
				border: none;
				margin-bottom: 0;
			}
			
			.compile-msg p:nth-child(3) {
				line-height: 40px;
			}
			
			.compile-msg p:nth-child(3)>span {
				float: right;
			}
			
			.compile-msg>form>input {
				margin-top: 50px;
				width: 40%;
				left: 30%;
			}
			/*提示*/
			
			.hint-modal {
				position: fixed;
				left: 10%;
				width: 80%;
				background: rgba(0, 0, 0, 0.5);
				color: #fff;
				bottom: 100px;
				text-align: center;
				font-size: 12px;
				padding: 5px 10px;
				display: none;
			}
			
			.hint-modal>p {
				color: #fff;
			}
			
			
			.actions {
				padding: 5px 0;
			}
			
			.file-btn {
				position: relative;
				width: 80px;
				height: 80px;
			}
			#upload {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				opacity: 0;
			}
			.gerenzl_top {
		    background: #FFFFFF;
		    margin-left: 15px;
		    padding: 3%;
		    text-align: center;
		    font-size: 15px;
			}
		</style>

	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a href="javascript:history.back(-1)" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">编辑资料</h1>
		</header>
		<!--编辑资料-->
		<div class="compile-msg">
			<form method="post" style="background-color: #fff;">
					<div class="gerenzl_top img-click">
						<div class="actions">
							<button class="file-btn">
				                <div id='keke'><i class=" fa fa-plus"></i></div>
				                <input type="file" id="upload" value="选择图片文件" multiple />
				                <span><img class='img_list' id='img_list' src="{$user.thumb?$user.thumb:'/public/static/images/user.png'}" style="width: 100%;height: 100%;" ></span>
				            </button>
						</div>
					</div>
					<div class="mui-input-row ">
					<label><em>*</em>昵称</label>
						<input type="text" id="user_name" class="mui-input-group" value="{$user.real_name}" placeholder="请填写昵称">					
					</div>
					<div class="mui-input-row">
						<label><em></em>手机号码</label>
						<input type="text" id="real_name" readonly="readonly" class="mui-input-group" value="{$user.mobile}">					
					</div>
				<input type="button" onclick="saveInfo()" value="保存" />
			</form>
		</div>

		<div class="hint-modal">
			<p></p>
		</div>
		<script src="js/mui.min.js"></script>
		<script src="/public/static/js/jquery.min.js"></script>
		<script src="/public/static/layui/layui.all.js"></script>
		<script>
			$('#upload').on('change', function() {
				readFile1(this, "img_list", 1);
			});

			function readFile1(input, name, length) {
				var img_list = $(input).parent().find('span').find("img");
				if(input.files && input.files[0]) {
					var reader = new FileReader();
					var AllImgExt = "image/jpg|image/jpeg|image/png|image/bmp";
					var extName = input.files[0].type.toLowerCase(); //（把路径中的所有字母全部转换为小写）          
					if(AllImgExt.indexOf(extName + "|") == -1) {
						ErrMsg = "该文件类型不允许上传。请上传 " + AllImgExt + " 类型的文件，当前文件类型为" + extName;
						alert(ErrMsg);
						return false;
					}
					var fd = new FormData();
					var sendData;
					for(var i = 0; i < input.files.length; i++) {
						var reader = new FileReader();
						reader.readAsDataURL(input.files[i]);
						reader.onload = function(event) {
							var img = new Image();
							img.onload = function() {
								var canvas = document.createElement("canvas");
								canvas.width = 500;
								canvas.height = 500 * img.height / img.width;
								var ctx = canvas.getContext('2d');
								ctx.clearRect(0, 0, canvas.width, canvas.height);
								ctx.drawImage(img, 0, 0, 500, 500 * img.height / img.width);
								var newImageData = canvas.toDataURL('image/jpeg', 0.8);
								sendData = newImageData.replace("data:" + 'image/jpeg' + ";base64,", '');
								$.post("upload1", {
									value: sendData
								}, function(data) {
									if(data.code == '200') {
										$("#" + name).val(data.url);
										img_list.attr("src", data.url);
									} else {
										layer.msg(data.msg);
									}
								});
							}
							img.src = reader.result;
						}

					}

				} else {
					alert("抱歉，你的浏览器不支持 FileReader");
				}
			}

			function saveInfo() {
				var imghead = $("#img_list").attr("src");
				var name = $("#user_name").val();
				if(name == "") {
					layer.msg("请输入昵称");
					return;
				}
				$.ajax({
					url: "{:url('member/up_userinfo')}",
					type: "post",
					data: {
						name: name,
						thumb: imghead
					},
					success: function(data) {
						layer.msg(data.msg);
					}
				})

			}
			$("#user_name").blur(function() {
				if($("#user_name").val() == '') {
					$(".hint-modal>p").text("您的昵称不能为空！");
					$(".hint-modal").fadeIn();
					var time = setTimeout(function() {
						$(".hint-modal").fadeOut();
					}, 2000);
				}
			})
		</script>
	</body>

</html>